<template>
  <el-form label-position="right" label-width="80px" ref="form" :rules="rules" :model="form">
    <el-form-item label="活动名称" prop="name">
      <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
    </el-form-item>
    <el-form-item label="负责站点" prop="team_id">
      <el-select v-model="form.team_id" placeholder="请选择负责站点" @change="getAdminList" @clear="getAdminList" style="width: 100%;">
        <el-option
          v-for="item in teamList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="负责人" prop="admin_id">
      <el-select v-model="form.admin_id" placeholder="请选择负责人" style="width: 100%;">
        <el-option
          v-for="item in adminList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="开始时间" prop="start_time">
      <el-date-picker
        v-model="form.start_time"
        align="right"
        type="datetime"
        placeholder="请选择开始时间"
        value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="结束时间" prop="end_time">
      <el-date-picker
        v-model="form.end_time"
        align="right"
        type="datetime"
        placeholder="请选择结束时间"
        value-format="yyyy-MM-dd HH:mm:ss" style="width: 100%;">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="活动地址" prop="address">
      <el-input v-model="form.address" placeholder="请输入活动地址"></el-input>
    </el-form-item>
    <el-form-item label="活动内容" prop="content">
      <el-input type="textarea" v-model="form.content" placeholder="请输入活动内容"></el-input>
    </el-form-item>
    <el-form-item class="contacts-add">
      <el-button type="primary" @click="onSubmit">提交</el-button>
      <el-button @click="cancle">关闭</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
// import * as APIAdmin from '@/api/admin'
import { servicerList } from "@/api/oldermanager";
import * as APIOrderactivity from '@/api/orderactivity'
import { unixToDate } from "@/utils"
export default {
  name: 'task-icon-add',
  props: {
    data: {
      type: Object,
      default: () => {}
    },
    teamList: {
      type: Array,
      default: () => {}
    }
  },
  data () {
    return {
      form: { admin_id:'' },
      // 表单校验
      rules: {
        name: [{ required: true, message: '请输入活动名称',trigger: 'blur'}],
        team_id: [{ required: true, message: '请选择负责站点',trigger: 'blur'}],
        admin_id: [{ required: true, message: '请选择负责人',trigger: 'blur'}],
        start_time: [{ required: true, message: '请选择开始时间',trigger: 'blur'}],
        end_time: [{ required: true, message: '请选择结束时间',trigger: 'blur'}]
      },
      adminList:[]
    }
  },
  mounted () {},
  methods: {
    getAdminList (value) {
      this.searchForm = {
        page: 1,
        page_size: 100,
        team_id: value
      }
      if(value){
       this.form.admin_id = ''
      }
      servicerList("get", this.searchForm).then((resp) => {
        if (resp.code === 200) {
          const { list = [], total = 0 } = resp.data;
          list.forEach(item => {
             item['id'] = String(item['id'])
          })
          this.adminList = list || []
        }
      });
    },
    lead () {
      this.form.msg = this.mealTemp
      this.$forceUpdate()
    },
    // 添加老人家属
    onSubmit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.id) {
            APIOrderactivity.orderactivityEdit(this.form).then(res => {
              this.cancle()
              this.load()
            })
          } else {
            APIOrderactivity.orderactivityAdd(this.form).then(res => {
              this.cancle()
              this.load()
            })
          }
        }
      })
    },
    load () {
      this.$emit('load')
    },
    cancle () {
      this.$refs.form.resetFields()
      this.$emit('cancle')
    }
  },
  watch: {
    data: {
      handler (newval) {
        this.adminList = [];
        this.form = JSON.parse(JSON.stringify(newval))
        if(this.form.id){
          this.getAdminList();
          this.form['admin_id'] = String(this.form['admin_id']);
          this.form['start_time'] = unixToDate(this.form['start_time']);
          this.form['end_time'] = unixToDate(this.form['end_time']);
        }
      },
      // 可以一进页面就触发监听器  监听器自带的immediate
      immediate: true,
      deep: true
    }
  }
}
</script>

<style lang="scss">
  .type-add-input {
    textarea {
      font-family: arial;
    }
  }
  .avatar-uploader {
    .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    i.icon-uploader-icon {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 80px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      vertical-align: bottom;
    }
    img{
       width: 178px;
       height: 178px;
    }
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
</style>
